<template>
  <div class="collaborationLedger">
     <PageTitle :goBack="false" title="监理采购价格库" :border="true" />
    <div class="info-div">
      <div v-if="false" class="info-left">
        <img src="../../../assets/images/left-btn.png" alt="" />
      </div>
      <div class="info-listData">
        <div class="info-item">
          <div class="info-icon">
            <img src="../../../assets/images/projectIcon/icon1.png" alt="" />
          </div>
          <div class="info-info">
            <div class="name">监理项目总数</div>
            <div class="value">{{ tzInfo.total }}</div>
          </div>
        </div>
        <div class="info-item">
          <div class="info-icon">
            <img src="../../../assets/images/projectIcon/icon2.png" alt="" />
          </div>
          <div class="info-info">
            <div class="name">水电</div>
            <div class="value"
            >{{
                tzInfo.counts.filter((item) => item.name === '水电').length
                  ? tzInfo.counts.filter((item) => item.name === '水电')[0].count
                  : 0
              }}
              <label style="margin-left: 4px; font-size: 12px; color: #606266"
              >占比{{
                  tzInfo.counts.filter((item) => item.name === '水电').length
                    ? tzInfo.counts.filter((item) => item.name === '水电')[0].percent
                    : 0
                }}%</label
              >
            </div>
          </div>
        </div>
        <div class="info-item">
          <div class="info-icon">
            <img src="../../../assets/images/projectIcon/sun.png" alt="" />
          </div>
          <div class="info-info">
            <div class="name">光伏</div>
            <div class="value"
            >{{
                tzInfo.counts.filter((item) => item.name === '光伏').length
                  ? tzInfo.counts.filter((item) => item.name === '光伏')[0].count
                  : 0
              }}
              <label style="margin-left: 4px; font-size: 12px; color: #606266"
              >占比{{
                  tzInfo.counts.filter((item) => item.name === '光伏').length
                    ? tzInfo.counts.filter((item) => item.name === '光伏')[0].percent
                    : 0
                }}%</label
              >
            </div>
          </div>
        </div>
        <div class="info-item">
          <div class="info-icon">
            <img src="../../../assets/images/projectIcon/route.png" alt="" />
          </div>
          <div class="info-info">
            <div class="name">公路</div>
            <div class="value"
            >{{
                tzInfo.counts.filter((item) => item.name === '公路').length
                  ? tzInfo.counts.filter((item) => item.name === '公路')[0].count
                  : 0
              }}
              <label style="margin-left: 4px; font-size: 12px; color: #606266"
              >占比{{
                  tzInfo.counts.filter((item) => item.name === '公路').length
                    ? tzInfo.counts.filter((item) => item.name === '公路')[0].percent
                    : 0
                }}%</label
              >
            </div>
          </div>
        </div>
        <div class="info-item">
          <div class="info-icon">
            <img src="../../../assets/images/projectIcon/icon6.png" alt="" />
          </div>
          <div class="info-info">
            <div class="name">其他</div>
            <div class="value">
              {{
                tzInfo.counts.filter((item) => item.name === '其他').length
                  ? tzInfo.counts.filter((item) => item.name === '其他')[0].count
                  : 0
              }}
              <label style="margin-left: 4px; font-size: 12px; color: #606266"
              >占比{{
                  tzInfo.counts.filter((item) => item.name === '其他').length
                    ? tzInfo.counts.filter((item) => item.name === '其他')[0].percent
                    : 0
                }}%</label
              >
            </div>
          </div>
        </div>
      </div>
      <div v-if="false" class="info-right">
        <img src="../../../assets/images/left-btn.png" alt="" />
      </div>
    </div>
    <div class="myCardCss" style="width: 100%">
      <div class="searchDiv">
        <div class="search-box">
          <a-select
            v-model:value="formData.professionalSector"
            placeholder="专业板块"
            style="width: 180px; margin-right: 8px"
            allow-clear
            @change="searchData"
            mode="multiple"
          >
            <!-- <template #suffixIcon>15</template> -->
            <a-select-option value="水电">水电</a-select-option>
            <a-select-option value="光伏">光伏</a-select-option>
            <a-select-option value="公路">公路</a-select-option>
            <a-select-option value="其他">其他</a-select-option>
          </a-select>
          <a-select
            v-model:value="formData.totalContractAmount"
            placeholder="合同总金额"
            @change="selectConAmount"
            allow-clear
            style="width: 150px; margin-right: 8px"
          >
            <a-select-option value="10-50">10-50万</a-select-option>
            <a-select-option value="50-100">50-100万</a-select-option>
            <a-select-option value="100-150">100-150万</a-select-option>
            <a-select-option value="150-200">150-200万</a-select-option>
            <a-select-option value="200-1000">200-1000万</a-select-option>
          </a-select>
          <a-input
            style="width: 150px; margin-right: 8px"
            placeholder="中标单位名称"
            @keyup.enter="searchData"
            allow-clear
            v-model:value="formData.winningBidderCompany"
          >
            <template #suffix v-if="false">
              <SearchOutlined />
            </template>
          </a-input>
          <a-input
            style="width: 180px; margin-right: 8px"
            placeholder="招标单位名称"
            @keyup.enter="searchData"
            allow-clear
            v-model:value="formData.biddingCompany"
          >
            <template #suffix v-if="false">
              <SearchOutlined />
            </template>
          </a-input>
          <a-input
            style="width: 180px; margin-right: 8px"
            placeholder="合同名称"
            @keyup.enter="searchData"
            allow-clear
            v-model:value="formData.contractName"
          >
            <template #suffix v-if="false">
              <SearchOutlined />
            </template>
          </a-input>
          <div
            class="exportBtn exportBtnOfSearch all-4-border"
            style="margin-right: 68px"
            @click="searchDataForButton"
          >
            查询
          </div>
        </div>
        <div class="buttons">
          <!-- 功能按钮 -->
          <a-button type="primary" style="margin-right: 8px" @click="showDialog">价格对比分析</a-button>
          <div class="exportBtn all-4-border" style="margin-right: 8px" @click="addLedger">
            新增
          </div>
          <div class="exportBtn all-4-border" @click="openUpload"> 批量导入 </div>
        </div>
      </div>
      <a-table
        :dataSource="dataSource"
        :columns="columns"
        :pagination="false"
        :scroll="{ x: 1000 }"
        :loading="loading"
      >
        <template #operation="{ record }">
          <a @click="openDetails(record)" style="color: #1473dc; margin-right: 12px">编辑</a>
          <a @click="openDelBox(record)" style="color: red">删除</a>
        </template>
        <template #constructionInvestmentProportion="{ record }">
          {{ record.constructionInvestmentProportion }}%
        </template>
        <template #biddingCompany="{ record }">
          <label v-html="record.biddingCompanyHtml"></label>
        </template>
        <template #contractName="{ record }">
          <label v-html="record.contractNameHtml"></label>
        </template>
        <template #winningBidderCompany="{ record }">
          <label v-html="record.winningBidderCompanyHtml"></label>
        </template>
      </a-table>
      <a-pagination
        size="small"
        :total="pageForm.total"
        :pageSize="pageForm.size"
        :current="pageForm.limit"
        :hideOnSinglePage="false"
        :showSizeChanger="false"
        @change="changePage"
        style="margin-top: 30px; float: right"
      />
      <div style="clear: both"></div>
    </div>
    <a-modal
      v-model:visible="isShowUpload"
      :maskClosable="false"
      :width="600"
      :centered="true"
      :okText="titleContent"
      title="批量导入"
      @ok="saveUpload"
    >
      <div class="my-upload">
        <a-upload-dragger
          v-model:fileList="fileList"
          name="file"
          :multiple="true"
          action=""
          style="height: 500px"
          :beforeUpload="handleChange"
          :remove="removeFile"
        >
          <div class="ant-upload-hint" v-if="isUploadState === 0">
            <div class="upload-icon">
              <img src="../../../assets/images/upload.png" alt="" />
            </div>
            <div class="upload-click">
              <label style="color: #1473dc">点击选择</label
              ><label>或将文件（xls、xlsx）拖拽至此上传项目表格</label>
            </div>
          </div>
          <div class="ant-upload-hint" v-if="isUploadState === 1">
            <div class="upload-icon">
              <img src="../../../assets/images/success.png" alt="" />
            </div>
            <div class="upload-click" style="color: #303133"> 上传成功 </div>
          </div>
          <div class="ant-upload-hint" v-if="isUploadState === 2">
            <div class="upload-icon">
              <img src="../../../assets/images/error.png" alt="" />
            </div>
            <div class="upload-click" style="color: #303133"> 导入失败 </div>
            <div style="color: #909399">请使用标准导入模板进行数据导入，否则将无法导入成功</div>
          </div>
        </a-upload-dragger>
      </div>
      <div class="tips">
        <div class="tipsItem"
        >· 导入的文件内容必须依照下载模板的要求填写
          <div>
            <div class="downloadBtn">
              <img src="../../../assets/images/download.png" alt="" />
              <label @click="downloadData">点击下载</label>
            </div>
          </div>
        </div>
        <div class="tipsItem">· 上传文件最大为2M，仅支持Excel表格文件（xls、xlsx）</div>
        <div class="tipsItem">· 导入重复数据将自动跳过</div>
      </div>
    </a-modal>

    <!-- 新增弹窗 -->
    <a-modal
      v-model:visible="isAdd"
      :maskClosable="false"
      :width="600"
      :centered="true"
      :okText="sureAdd"
      :title="modalTitle"
      @ok="savaAdd"
      @cancel="close"
      style="padding: 20px"
    >
      <a-form
        :model="addModelForm"
        :label-col="{ span: 8 }"
        :wrapper-col="12"
        style="margin-top: 16px"
        ref="formRef"
        :rules="rules"
      >
        <a-form-item label="专业板块" name="professionalSector1">
          <a-select
            v-model:value="addModelForm.professionalSector1"
            placeholder="专业板块"
            style="width: 300px"
            allow-clear
          >
            <a-select-option value="水电">水电</a-select-option>
            <a-select-option value="光伏">光伏</a-select-option>
            <a-select-option value="公路">公路</a-select-option>
            <a-select-option value="其他">其他</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="招标单位" name="biddingCompany">
          <a-input
            v-model:value="addModelForm.biddingCompany"
            placeholder="请输入完整的招标单位名称"
            style="width: 300px"
          />
        </a-form-item>
        <a-form-item label="合同名称" name="contractName">
          <a-input
            v-model:value="addModelForm.contractName"
            placeholder="请输入完整的合同名称"
            style="width: 300px"
          />
        </a-form-item>
        <a-form-item label="中标单位" name="winningBidderCompany">
          <a-input
            v-model:value="addModelForm.winningBidderCompany"
            placeholder="请输入完整的中标单位名称"
            style="width: 300px"
          />
        </a-form-item>
        <a-form-item label="合同总金额 (元)">
          <a-input
            v-model:value="addModelForm.contractAmount"
            placeholder="请输入合同总金额"
            style="width: 300px"
            type="number"
          />
        </a-form-item>
        <a-form-item label="合同签订日期">
          <a-date-picker valueFormat="YYYY-MM-DD" v-model:value="addModelForm.contractSignDate" style="width: 300px" />
        </a-form-item>
        <a-form-item label="占施工投资比例(%)">
          <a-input
            v-model:value="addModelForm.constructionInvestmentProportion"
            placeholder="占施工投资额比例"
            style="width: 300px"
            type="number"
            @blur="numberMax(addModelForm.constructionInvestmentProportion)"
          />
        </a-form-item>
        <a-form-item label="综合人月单价(元/月)">
          <a-input
            v-model:value="addModelForm.comprehensiveMonthlySalary"
            placeholder="请输入综合人月单价(元/月)"
            style="width: 300px"
            type="number"
          />
        </a-form-item>
        <a-form-item label="总监月单价 (元/月)">
          <a-input
            v-model:value="addModelForm.chiefMonthlySalary"
            placeholder="请输入总监月单价 (元/月)"
            style="width: 300px"
            type="number"
          />
        </a-form-item>
        <a-form-item label="副总监月单价 (元/月)">
          <a-input
            v-model:value="addModelForm.deputyChiefMonthlySalary"
            placeholder="请输入副总监月单价 (元/月)"
            style="width: 300px"
            type="number"
          />
        </a-form-item>
        <a-form-item label="监理工程师月单价(元/月)">
          <a-input
            v-model:value="addModelForm.supervisingEngineerMonthlySalary"
            placeholder="请输入监理工程师月单价(元/月)"
            style="width: 300px"
            type="number"
          />
        </a-form-item>
        <a-form-item label="监理员月单价(元/月)">
          <a-input
            v-model:value="addModelForm.supervisorMonthlySalary"
            placeholder="请输入监理员月单价(元/月)"
            style="width: 300px"
            type="number"
          />
        </a-form-item>
      </a-form>
    </a-modal>
    <!-- 导入数据弹窗 -->
    <a-modal
      v-model:visible="isUploadDetails"
      :maskClosable="false"
      :width="1500"
      :centered="true"
      okText="完成"
      cancel-text="下载错误数据"
      title="批量导入"
      @ok="closeUploadDetails"
      @cancel="downErrorData"
      style="padding: 20px"
      :footer="false"
    >
      <div class="myTableClass">
        <div class="myHead">
          <div
            class="myCol"
            v-for="(headItem, index) in columnsByUpload"
            :key="index"
            :title="headItem"
          >
            {{ headItem }}
          </div>
        </div>
        <div class="myRow" v-for="(dataItem, index) in uploadData" :key="index">
          <div
            class="myCol"
            :class="!dataItem.valid ? 'active' : ''"
            v-for="(colItem, colIndex) in dataItem.columns"
            :key="colIndex"
            :title="colItem"
          >{{ colItem }}</div
          >
        </div>
      </div>
      <div class="footerBtn">
        <a-button @click="downErrorData" style="margin-right: 12px">下载错误数据</a-button>
        <a-button type="primary" danger @click="closeUploadDetails">完成</a-button>
      </div>
      <div style="clear: both"></div>
    </a-modal>
    <a-modal v-model:visible="isShowDelBox" title="提示" @ok="handleOk">
      <div style="padding: 20px">确定删除此采购项吗？</div>
    </a-modal>
    <!-- 价格对比分析 -->
    <PriceAnalysis ref="priceAnalysis" />
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { SearchOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import PriceAnalysis from './PriceAnalysis.vue';
import PageTitle from '/@/components/PageTitle/index.vue';
import {
  getPreview,
  getProcurementInfo,
  addInternal,
  editInfo,
  delInfo,
} from '/@/api/priceLibrary';
import { getAppEnvConfig } from '/@/utils/env';
import { downloadTemple, downloadErrorData } from '/@/api/fileApi';
import { checkToken } from '/@/api/checkToken';
import { getToken } from '/@/utils/auth';
const formRef = ref();
let rules = ref({
  professionalSector1: [{ required: true, message: '请选择专业模块', trigger: 'change' }],
  biddingCompany: [{ required: true, message: '请输入招标单位', trigger: 'blur' }],
  winningBidderCompany: [{ required: true, message: '请输入中标单位', trigger: 'blur' }],
  contractName: [{ required: true, message: '请输入合同名称', trigger: 'blur' }],
});
let formData = ref({
  professionalSector: [], // 专业版块
  totalContractAmount: null, // 合同总金额
  winningBidderCompany: null, // 中标单位名称
  biddingCompany: null, // 招标单位名称
  contractName: null, // 合同名称
});
let needContractAmountMin = ref(0);
let needContractAmountMax = ref(0);
const selectConAmount = (e: any) => {
  if (e) {
    needContractAmountMin.value = e.split('-')[0];
    needContractAmountMax.value = e.split('-')[1];
    getData();
  } else {
    needContractAmountMin.value = 0;
    needContractAmountMax.value = 0;
    getData();
  }
};
let dataSource = ref([]);
let columns = ref([
  {
    title: '序号',
    align: 'left',
    fixed: true,
    width: '80px',
    key: 'index',
    dataIndex: 'index',
  },
  {
    title: '专业版块',
    dataIndex: 'professionalSector',
    key: 'professionalSector',
    align: 'left',
    width: '100px',
    fixed: true,
  },
  {
    title: '招标单位',
    dataIndex: 'biddingCompany',
    // key: 'biddingCompany',
    slots: { customRender: 'biddingCompany' },

    align: 'left',
    width: '300px',
    fixed: true,
  },
  {
    title: '合同名称',
    dataIndex: 'contractName',
    // key: 'contractName',
    slots: { customRender: 'contractName' },
    align: 'left',
    width: '400px',
  },
  {
    title: '中标单位',
    dataIndex: 'winningBidderCompany',
    // key: 'winningBidderCompany',
    slots: { customRender: 'winningBidderCompany' },
    align: 'left',
    width: '200px',
  },
  {
    title: '合同总金额(元)',
    dataIndex: 'contractAmount',
    key: 'contractAmount',
    align: 'left',
    width: '200px',
  },
  {
    title: '合同签订日期',
    dataIndex: 'contractSignDate',
    key: 'contractSignDate',
    align: 'left',
    width: '200px',
  },
  {
    title: '占施工投资额比例',
    dataIndex: 'constructionInvestmentProportion',
    // key: 'constructionInvestmentProportion',
    slots: { customRender: 'constructionInvestmentProportion' },
    align: 'left',
    width: '200px',
  },
  {
    title: '综合人月单价(元/月)',
    dataIndex: 'comprehensiveMonthlySalary',
    key: 'comprehensiveMonthlySalary',
    align: 'left',
    width: '200px',
  },
  {
    title: '总监月单价(元/月)',
    dataIndex: 'chiefMonthlySalary',
    key: 'chiefMonthlySalary',
    align: 'left',
    width: '200px',
  },
  {
    title: '副总监月单价(元/月)',
    dataIndex: 'deputyChiefMonthlySalary',
    key: 'deputyChiefMonthlySalary',
    align: 'left',
    width: '200px',
  },
  {
    title: '监理工程师月单价(元/月)',
    dataIndex: 'supervisingEngineerMonthlySalary',
    key: 'supervisingEngineerMonthlySalary',
    align: 'left',
    width: '200px',
  },
  {
    title: '监理员月单价(元/月)',
    dataIndex: 'supervisorMonthlySalary',
    key: 'supervisorMonthlySalary',
    align: 'left',
    width: '200px',
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    width: '160px',
    slots: { customRender: 'operation' },
    align: 'center',
    fixed: 'right',
  },
]);
let tzInfo = ref({ total: 0, counts: [] });
let pageForm = ref({
  size: 10,
  limit: 1,
  total: 0,
});
// 弹窗组件
const priceAnalysis = ref("")

function changePage(val) {
  pageForm.value.limit = val;
  // todo
  getData();
}
// 获取项目台账统计信息
async function getTZinfo() {
  const res = await getPreview();
  console.log(res, 'getTZinfo-----');
  tzInfo.value = res;
}
let loading = ref(false);
async function getData() {
  loading.value = true;
  let queryData = {
    professionalSector: formData.value.professionalSector
      ? formData.value.professionalSector.toString()
      : '', // 专业版块
    winningBidderCompany: formData.value.winningBidderCompany, // 中标单位名称
    biddingCompany: formData.value.biddingCompany, // 招标单位名称
    contractName: formData.value.contractName, // 合同名称
    contractAmountMin: +needContractAmountMin.value,
    contractAmountMax: +needContractAmountMax.value,
    limit: pageForm.value.limit,
    size: pageForm.value.size,
  };
  // 判断最大值
  if (needContractAmountMax.value == 0) {
    delete queryData.contractAmountMax;
    delete queryData.contractAmountMin;
  }
  if (queryData.professionalSector == '') {
    delete queryData.professionalSector;
  }
  const res = await getProcurementInfo(queryData);
  let needCurrentPage = res.currentPage;
  let biddingCompanyHtml = '';
  let contractNameHtml = '';
  let winningBidderCompanyHtml = '';
  dataSource.value = res.list.map((item, index) => {
    if (queryData.biddingCompany) {
      biddingCompanyHtml = item.biddingCompany.replaceAll(
        queryData.biddingCompany.trim(),
        `<span style="color: red;">${queryData.biddingCompany.trim()}</span>`,
      );
    } else {
      biddingCompanyHtml = item.biddingCompany;
    }
    if (queryData.contractName) {
      contractNameHtml = item.contractName.replaceAll(
        queryData.contractName.trim(),
        `<span style="color: red;">${queryData.contractName.trim()}</span>`,
      );
    } else {
      contractNameHtml = item.contractName;
    }
    if (queryData.winningBidderCompany) {
      winningBidderCompanyHtml = item.winningBidderCompany.replaceAll(
        queryData.winningBidderCompany.trim(),
        `<span style="color: red;">${queryData.winningBidderCompany.trim()}</span>`,
      );
    } else {
      winningBidderCompanyHtml = item.winningBidderCompany;
    }
    return {
      ...item,
      biddingCompanyHtml,
      contractNameHtml,
      winningBidderCompanyHtml,
      index: needCurrentPage * 10 - 10 + index + 1,
    };
  });
  console.log(dataSource.value, 'dataSource.value');
  pageForm.value.total = res.total;
  // setTimeout(() => {
  loading.value = false;
  // }, 2000);
}
getTZinfo();
getData();
function searchData() {
  pageForm.value.limit = 1;
  getData();
}
// 批量上传
let isShowUpload = ref(false); // 是否打开批量监控弹窗
function openUpload() {
  isShowUpload.value = true;
}
let fileList = ref([]) as any;
let titleContent = ref('确定导入');
// 下载纪录
async function downloadData() {
  let res = await downloadTemple('内部采购导入模板.xlsx');
  let url = window.URL.createObjectURL(res.data);
  let link = document.createElement('a');
  link.style.display = 'none';
  link.download = '监理采购导入模板.xlsx';
  link.href = url;
  document.body.appendChild(link);
  link.click();
}
let fileData = null;
const handleChange = (file: any) => {
  fileData = file;
  fileList.value = [file];
  return false;
};
const removeFile = () => {
  fileList.value = [];
  fileData = null;
};
let isUploadState = ref(0);

async function saveUpload() {
  if (!fileData) {
    return message.warn('请选择要上传的文件');
  }
  let action = getAppEnvConfig().VITE_GLOB_API_URL + '/procurement-internal/import';
  const formData = new FormData();
  formData.append('file', fileData);
  const xhr = new XMLHttpRequest();
  xhr.open('post', action, true);
  xhr.setRequestHeader('Authorization', 'Bearer ' + localStorage.getItem('token'));
  xhr.onload = () => {
    const response = JSON.parse(xhr.response);
    if (response.code === 0) {
      message.success('导入成功');
      isUploadState.value = 1;
      isShowUpload.value = false;
      getData();
      getTZinfo();
      isUploadState.value = 0;
      fileId = response.data.errorFileId;
      errorNum = response.data.errorCount;
      uploadData.value = response.data.excelData.rows;
      columnsByUpload.value = response.data.excelData.head;
      openUploadDetails();
    }
    if (response.code === 500 || response.code === 400) {
      message.error(response.msg);
      titleContent.value = '重新上传';
      isUploadState.value = 2;
      fileData = null;
      fileList.value = [];
    }
  };
  xhr.onerror = () => {
    console.log('上传失败');
  };
  xhr.ontimeout = function timeout() {
    console.log('上传超时');
  };
  xhr.send(formData);
  fileList.value = [];
  fileData = null;
}

let needId = ref('');

// 新增
let modalTitle = ref('');
const isAdd = ref(false);
let sureAdd = ref('确认');
let addModelForm = ref({
  id: '', //id
  professionalSector1: null, //专业版块
  biddingCompany: '', //招标单位名称
  contractName: '', //合同名称
  winningBidderCompany: '', //中标单位名称
  contractAmount: '', //合同金额
  contractSignDate: null, //合同签订日期
  constructionInvestmentProportion: '', //占施工投资比例
  comprehensiveMonthlySalary: '', //综合人月单价(元/月)
  chiefMonthlySalary: '', //总监月单价 (元/月)
  deputyChiefMonthlySalary: '', //副总监月单价 (元/月)
  supervisingEngineerMonthlySalary: '', //监理工程师月单价 (元/月)
  supervisorMonthlySalary: '', //监理员月单价(元/月)
});
const addLedger = () => {
  modalTitle.value = '新增';
  isAdd.value = true;
};

const savaAdd = async () => {
  formRef.value.validate().then(() => {
    let queryData = {
      professionalSector: addModelForm.value.professionalSector1
        ? addModelForm.value.professionalSector1.toString()
        : '', // 专业版块
      biddingCompany: addModelForm.value.biddingCompany, // 招标单位名称
      contractName: addModelForm.value.contractName, // 合同名称
      winningBidderCompany: addModelForm.value.winningBidderCompany, // 中标单位名称
      contractAmount: addModelForm.value.contractAmount, // 合同金额
      contractSignDate: addModelForm.value.contractSignDate, //合同签订日期
      constructionInvestmentProportion: addModelForm.value.constructionInvestmentProportion, // 占施工投资比例
      comprehensiveMonthlySalary: addModelForm.value.comprehensiveMonthlySalary, // 综合人月单价(元/月)
      chiefMonthlySalary: addModelForm.value.chiefMonthlySalary, // 总监月单价 (元/月)
      deputyChiefMonthlySalary: addModelForm.value.deputyChiefMonthlySalary, // 副总监月单价 (元/月)
      supervisingEngineerMonthlySalary: addModelForm.value.supervisingEngineerMonthlySalary, // 监理工程师月单价 (元/月)
      supervisorMonthlySalary: addModelForm.value.supervisorMonthlySalary, // 监理员月单价(元/月)
    };
    if (needId.value) {
      console.log(1515);
      queryData.id = needId.value;
      editInfo(queryData)
        .then((res) => {
          addModelForm.value = {
            id: needId.value,
            professionalSector: null, //专业版块
            biddingCompany: '', //招标单位名称
            contractName: '', //合同名称
            winningBidderCompany: '', //中标单位名称
            contractAmount: '', //合同金额
            contractSignDate: null, //合同签订日期
            constructionInvestmentProportion: '', //占施工投资比例
            comprehensiveMonthlySalary: '', //综合人月单价(元/月)
            chiefMonthlySalary: '', //总监月单价 (元/月)
            deputyChiefMonthlySalary: '', //副总监月单价 (元/月)
            supervisingEngineerMonthlySalary: '', //监理工程师月单价 (元/月)
            supervisorMonthlySalary: '', //监理员月单价(元/月)
          };
          isAdd.value = false;
          getData();
          getTZinfo();
          needId.value = '';
          message.success('修改成功');
        })
        .catch((err) => {
          message.error('修改失败');
        });
    } else {
      // 调用新增的接口
      addInternal(queryData)
        .then((res) => {
          addModelForm.value = {
            professionalSector: null, //专业版块
            biddingCompany: '', //招标单位名称
            contractName: '', //合同名称
            winningBidderCompany: '', //中标单位名称
            contractAmount: '', //合同金额
            contractSignDate: null, //合同签订日期
            constructionInvestmentProportion: '', //占施工投资比例
            comprehensiveMonthlySalary: '', //综合人月单价(元/月)
            chiefMonthlySalary: '', //总监月单价 (元/月)
            deputyChiefMonthlySalary: '', //副总监月单价 (元/月)
            supervisingEngineerMonthlySalary: '', //监理工程师月单价 (元/月)
            supervisorMonthlySalary: '', //监理员月单价(元/月)
          };
          isAdd.value = false;
          getData();
          getTZinfo();
          message.success('新增成功');
        })
        .catch((err) => {
          message.error('新增失败');
        }); // 调用新增的接口
    }
  });
};
const close = () => {
  addModelForm.value = {
    id: '',
    professionalSector: null, //专业版块
    biddingCompany: '', //招标单位名称
    contractName: '', //合同名称
    winningBidderCompany: '', //中标单位名称
    contractAmount: '', //合同金额
    contractSignDate: null, //合同签订日期
    constructionInvestmentProportion: '', //占施工投资比例
    comprehensiveMonthlySalary: '', //综合人月单价(元/月)
    chiefMonthlySalary: '', //总监月单价 (元/月)
    deputyChiefMonthlySalary: '', //副总监月单价 (元/月)
    supervisingEngineerMonthlySalary: '', //监理工程师月单价 (元/月)
    supervisorMonthlySalary: '', //监理员月单价(元/月)
  };
  // getData();
  isAdd.value = false;
  console.log(addModelForm.value);
  needId.value = '';
  formRef.value.resetFields();
};
const searchDataForButton = () => {
  getData();
};

// const checkToken1 = () => {
//   checkToken({
//     token: getToken(),
//   })
//     .then((res) => {
//       console.log(res);
//     })
//     .catch((err) => {
//       console.log(err);
//     });
// };
// checkToken1();
// 编辑
const openDetails = (row) => {
  needId.value = row.id;
  modalTitle.value = '编辑';
  isAdd.value = true;
  addModelForm.value = row;
  addModelForm.value.professionalSector1 = row.professionalSector;
};

const numberMax = (e) => {
  console.log(e);
  if (e > 100) {
    addModelForm.value.constructionInvestmentProportion = 100;
  }
  if (e < 0) {
    addModelForm.value.constructionInvestmentProportion = 0;
  }
};

// 批量导入数据详情
let isUploadDetails = ref(false);
let uploadData = ref([]);
let columnsByUpload = ref([]);
let fileId = '';
let errorNum = 0;
// 打开窗口
const openUploadDetails = () => {
  isUploadDetails.value = true;
};
// 关闭窗口
const closeUploadDetails = () => {
  isUploadDetails.value = false;
};
// 下载错误数据
const downErrorData = async () => {
  if (!errorNum) {
    message.warning('无错误数据');
    return;
  }
  let res = await downloadErrorData(fileId);
  let url = window.URL.createObjectURL(res.data);
  let link = document.createElement('a');
  link.style.display = 'none';
  link.download = '内部采购导入错误数据.xlsx';
  link.href = url;
  document.body.appendChild(link);
  link.click();
};
let isShowDelBox = ref(false);
let delId = ref(0);
const openDelBox = (e: any) => {
  delId.value = e.id;
  isShowDelBox.value = true;
};
const handleOk = async () => {
  await delInfo(delId.value);
  isShowDelBox.value = false;
  getData();
  getTZinfo();
};

/**
 * 弹出图表
 */
function showDialog() {
  priceAnalysis.value.showModal(formData.biddingCompany)
}
</script>
<style lang="less" scoped>
.collaborationLedger {
  .info-div {
    padding: 0 24px;
    position: relative;
    width: 100%;
    height: 98px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 8px;

    .info-left {
      position: absolute;
      left: 16px;
      top: 50%;
      transform: translateY(-50%);
    }

    .info-listData {
      display: flex;
      width: 100%;

      .info-item {
        width: 19%;
        height: 66px;
        border-radius: 4px;
        border: 1px solid #dcdfe6;
        margin-right: 12px;
        display: flex;

        .info-icon {
          margin-right: 12px;
          margin-left: 8px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }

        .info-info {
          height: 100%;
          padding: 8px 0;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .name {
            font-size: 14px;
            color: #606266;
          }

          .value {
            font-size: 20px;
            font-weight: 500;
            color: #303133;
          }
        }
      }
    }

    .info-right {
      position: absolute;
      top: 50%;
      right: 16px;
      transform: rotate(180deg) translateY(50%);
    }
  }

  .searchDiv {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .exportBtn {
      // float: right;
      border: 1px solid #c11a20;
      width: 26%;
      height: 32px;
      text-align: center;
      line-height: 32px;
      font-size: 14px;
      font-weight: 500;
      color: #c11a20;
      cursor: pointer;
    }
  }
}

.my-upload {
  padding: 0 20px;
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;

  .upload-click {
    font-size: 14px;
  }

  img {
    margin: 0 auto;
  }
}

.tips {
  margin-top: 12px;
  padding: 0 20px;

  .tipsItem {
    font-size: 12px;
    font-weight: normal;
    line-height: 20px;
    letter-spacing: -0.01px;
    color: #606266;
    display: flex;

    .downloadBtn {
      width: fit-content;
      height: 24px;
      border-radius: 4px;
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 2px 8px;
      box-sizing: border-box;
      border: 1px solid #1473dc;
      margin-left: 8px;
      font-size: 12px;
      line-height: 24px;
      color: #1473dc;

      img {
        margin-right: 5px;
      }
    }
  }
}

.exportBtnOfSearch {
  background-color: #c11a20;
  color: #fff !important;
  width: 20% !important;
  height: 32px !important;
}

.buttons {
  display: flex;
  justify-content: right;
  width: 30%;
  // float: right;
  margin-left: 20px;
}

.search-box {
  display: flex;
  justify-content: left;
  //justify-content: space-between;
  //align-items: center;
}

:deep(.ant-select-multiple .ant-select-selector:after) {
  content: '' !important;
}

:deep(.ant-pagination .ant-pagination-item-active a) {
  // .ant-pagination-item {
  color: #c11a20 !important;
}

:deep(.ant-pagination .ant-pagination-item a) {
  color: #606266;
}

:deep(.ant-pagination .ant-pagination-item) {
  background-color: transparent !important;
  border: none !important;
}

:deep(.ant-pagination-prev) {
  border: none !important;
}

:deep(.ant-pagination-next) {
  border: none !important;
}
.myTableClass {
  padding: 10px;
  width: 100%;
  max-height: 750px;
  overflow: auto;
  box-sizing: border-box;
  .myHead {
    display: flex;
    background: #f5f7fa;
  }
  .myRow {
    display: flex;
    border-top: 1px solid #ebeef5;
    width: fit-content;
  }
  .myRow:last-child {
    border-bottom: 1px solid #ebeef5;
    width: fit-content;
  }
  .myCol {
    width: 130px;
    text-align: left;
    padding: 10px 8px;
    color: #303133;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .myCol.active {
    color: #c11a20;
  }
}
.footerBtn {
  float: right;
  margin: 10px 20px 20px;
}
  .reset-btn {
    border-radius: 4px;
    &:hover {
      color: #c11a20;
      border-color: #c11a20;
    }
  }
</style>
